import React, { Component } from "react";
import { NavBar, Icon, Tabs, Toast ,Modal} from "antd-mobile";
import "./Collection.scss";
const alert = Modal.alert;
export default class Collections extends Component {
  state = {
    allChecked: true,
    collections: [],
    collectionindex:""
  };
  componentDidMount() {
    let collections_str = localStorage.getItem("collections");
    let collections = JSON.parse(collections_str || "[]");

    // 判断 全选按钮的状态
    let allChecked = true;
    let bool = collections.some((v, i) => {
      // 只要有一个是假
      //   console.log(v.checked)
      if (!v.checked) {
        return true; // 说明购物小车中没有被全选
      }
    });
    // console.log(bool)
    if (bool) {
      // 真的情况
      allChecked = false;
    }
    this.setState({
      allChecked,
    });
    console.log(allChecked);

    this.saveCarts(collections);
  }
  // 单选按钮
  handleSelect = (index) => {
    // console.log(index)
    let collections = this.state.collections;
    // console.log(collections[index])
    collections[index].checked = !collections[index].checked;
    this.saveCarts(collections);
    let bool = collections.some(v => {
        if (!v.checked) {
            return true
        }
    })
    if (bool) {
        this.setState({
            allChecked: false
        })
    } else {
        this.setState({
            allChecked: true
        })
    }
  };
  // 保存收藏collection
  saveCarts = (collections) => {
    this.collections = collections;
    localStorage.setItem("collections", JSON.stringify(collections));
    // 异步 this.state.carts
    this.setState({
      collections
    });
  };
  //  全选按钮
  handleAllCheck = (params) => {
    let allChecked = !this.state.allChecked;
    this.setState({
      allChecked,
    });
    this.collections.forEach(v => {
        v.checked = allChecked
    })
  };
// 删除按钮
handleRemove = (index) => {
    let collections_str = localStorage.getItem("collections");
    let collections = JSON.parse(collections_str || "[]");
        alert('删除', '你确定嘛', [
            { text: '再想想', onPress: () => console.log('cancel') },
            {
                text: '确定', onPress: () => {
                    collections.splice(index, 1)
                    this.saveCarts(collections)  
                }
            },
        ])   
}
// 添加购物车
handleAddshop = (params) => {
    let carts_str = localStorage.getItem("carts");
    let carts = JSON.parse(carts_str) || [];
    let index = carts.findIndex(val=>{
        if(val.id==this.collections[params].id || val.cid==this.collections[params].id){
            return true
        }
    })
    // 判断当前商品是否在购物车里面
  
    if(index==-1){
       carts.push(this.collections[params])
       Toast.info('加入购物车成功', 1);
    }else{
        carts[index].num++
       Toast.info('购物车已存在数量加一', 1);
    }
    localStorage.setItem("carts",JSON.stringify(carts))
}
// 加入购物车多加
handleAllAddshop = (params) => {
    let collections_str = localStorage.getItem("collections");
    let collections = JSON.parse(collections_str || "[]");
    let carts_str = localStorage.getItem("carts");
    let carts = JSON.parse(carts_str|| "[]");
    let arr = collections.filter((v,i)=>{
    // }
    return v.checked==true
    })
    let arr2 = []
    if(arr.length&&carts.length){
        console.log(arr);
        for(let i=0; i<arr.length;i++){
            let bool = false
            let index = 0
            for(let j=0;j<carts.length;j++){
               if(arr[i].id==carts[j].id && arr[i].cid==carts[j].cid){
                bool = true
                index = j
                break;
               }
            }
            if(bool ){
                console.log(carts[index].num);
                carts[index].num++;
                console.log(carts[index].num);
              }else{
                  arr2.push(arr[i])
                  console.log(arr2);
                  break;
              }
        }
    }else{
        carts = [...carts,...arr]
    }
    console.log(carts)
    carts = [...carts,...arr2]
    arr2 = null
    arr= null
    console.log(carts)
    localStorage.setItem("carts",JSON.stringify(carts))
    Toast.info('加入购物车成功', 1);
    // if(index==-1){
    //    carts.push(v[i])
    //    Toast.info('加入购物车成功', 1);
    // }else{
    //     carts[index].num++
    //    Toast.info('购物车已存在数量加一', 1);
    // }
    // localStorage.setItem("carts",JSON.stringify(carts))
       
    // })
    
}
// 删除按钮多删
handleAllremove = (params) => {
  let collections_str = localStorage.getItem("collections");
    let collections = JSON.parse(collections_str || "[]");
    let collectionsremove = collections
    for(let j=collectionsremove.length-1;j>-1;j--){
      if(collectionsremove[j].checked){
        collectionsremove.splice(j,1)
      }
    }
    localStorage.setItem("collections",JSON.stringify(collectionsremove))
    this.setState({
      collections:collectionsremove
    })
    Toast.info('删除成功', 1);
}

  render() {
    return (
      <div className="collections">
        {/* 收藏页导航开始 */}
        <NavBar
          className="collections-navbar"
          mode="light"
          icon={<Icon type="left" style={{}} />}
          onLeftClick={() => window.history.go(-1)}
          rightContent={[<i className="iconfont icon-gengduo"></i>]}
        >
          我的收藏
        </NavBar>
        {/* 收藏页导航结束 */}
        {/* 收藏页全选行开始 */}
        <div className="allcheckbox">
          <div className="allcheckbox-left">
            <i
              className={this.state.allChecked ? "select_all" : "selectALL"}
              onClick={this.handleAllCheck}
            ></i>
            <span className="test">全选</span>
          </div>
          <div className="allcheckbox-right">
            <div className="Addcart" onClick={this.handleAllAddshop}>加入购物车</div>
            <div className="removecheck" onClick={this.handleAllremove}>删除选中</div>
          </div>
        </div>
        {/* 收藏页全选行结束 */}
        {/* 收藏页内容区开始 */}
        <div className="collections-conent">
          {this.state.collections.map((v, index) => {
            return (
              <div className="collectionItem" key={v.id}>
                <div className="collectionItem-left">
                  <i
                    className={v.checked ? "select_circle" : "content-wrap"}
                    onClick={this.handleSelect.bind(this, index)}
                  ></i>
                </div>
                <div className="collectionItem-midle">
                  <img src={v.imgList} alt="" className="midle-img" />
                </div>
                <div className="collectionItem-right">
                  <div className="right-top">
                    <div className="right-text1">{v.name}</div>
                  </div>
                  <div className="right-midlle">
                    <div className="right-pirce">￥{v.price}</div>
                  </div>
                  <div className="right-bottom">
                    <div className="bottom-left">
                      <i className="iconfont icon-gouwuche" onClick={this.handleAddshop.bind(this,index)}></i>
                    </div>
                    <div className="bottom-right">
                      <i className="iconfont icon-huishouzhan" onClick={this.handleRemove.bind(this,index)}></i>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
        {/* 收藏页内容区结束 */}
      </div>
    );
  }
}
